<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/common_head :: commonHeader('高度关注物质新增')"/>
    <link rel="stylesheet" th:href="@{/static/js/plugins/jquery-layout/jquery.layout-latest.css}">
</head>
<body class="gray-bg">
<div class="container-div ui-layout-center">
    <div class="row">
        <div class="form-group">
            <div class="col-sm-8" style="margin-left: 16px">
                <input class="btn btn-primary" type="button" onclick="save()" value="保存">
                <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
            </div>
        </div>
        <div class="col-sm-12 select-info">
            <form  id="substanceForm" class="form-horizontal" method="post">
                <div class="ibox float-e-margins">
                    <div style="margin-bottom: 10px">
                        <button type="button" id="substanceAddBtn" class="btn btn-rounded btn-sm" onclick='addTr()'><i class="fa fa-plus"></i>&nbsp;添加</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered text-nowrap" id="substance_table">
                            <thead>
                            <tr>
                                <th style="text-align: center">高度关注物质</th>
                                <th style="text-align: center">中文名称</th>
                                <th style="text-align: center">英文名称</th>
                                <th style="text-align: center">化学文摘号</th>
                                <th style="text-align: center">操作</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<script type="text/javascript" th:src="@{/static/js/plugins/jquery-layout/jquery.layout-latest.js}"></script>

<script type="text/javascript">

    //新增行
    var index =0;

    function addTr() {
        var trCode = "<tr>";
        trCode += "<td><input id="+"svhc"+index+ " class='form-control' name="+"svhc"+index+ " required autocomplete='off'/></td>";
        trCode += "<td><input id="+"zhName" + index + " class='form-control' name="+"zhName"+index+ " required autocomplete='off'/></td>";
        trCode += "<td><input id="+"enName" + index + " class='form-control' name="+"enName"+index+ " required autocomplete='off'/></td>";
        trCode += "<td><input id="+"casNo"+index+" class='form-control' name="+"casNo"+index+ " required autocomplete='off'/></td>";
        trCode += "<td align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link'>删除</button></td>";
        trCode += "</tr>";
        $("#substance_table tbody").append(trCode);
        index=index+1;
    }

    //删除
    function deletetr(obj) {
        $(obj).parents("tr").remove();
    }

    //保存提交的数据
    function save(){
        if($("#substanceForm").valid()) {
            //得到行项目数据
            var trs = $("#substance_table tbody").find("tr");
            if(trs.length==0){
                Dialog.errorMsg("请添加数据再保存！");
                return ;
            }
            var datas = [];
            //将每行数据封装成对象存入datas
            trs.each(function (index, tr) {
                var SvhcItemEntity = {};
                SvhcItemEntity.svhc = $(tr).find("input")[0].value;
                SvhcItemEntity.zhName = $(tr).find("input")[1].value;
                SvhcItemEntity.enName = $(tr).find("input")[2].value;
                SvhcItemEntity.casNo = $(tr).find("input")[3].value;
                datas.push(SvhcItemEntity);
            });

            layer.load(1, {shade: [0.3, '#393D49']});
            $.ajax({
                url: ctxPath + "/svhc/save",
                type: 'POST',
                data: JSON.stringify(datas), // 上传formdata封装的数据包
                dataType: 'JSON',
                cache: false, // 不缓存
                processData: false, // jQuery不要去处理发送的数据
                contentType: false, // jQuery不要去设置Content-Type请求头
                async: false,
                success: function (data) {
                    layer.closeAll();
                    if (data.code==0) {
                        Dialog.msg("操作成功!");
                        parent.refresh();
                        Dialog.closeFrame(window.name);
                    } else {
                        Dialog.errorMsg("操作失败，请重试!");
                    }
                }
            });
        }
    }
</script>

</body>
</html>